<template>
	<view class="my">
		<!-- 背景图 -->
		<view class="bjImage">
			<image src="@/static/my/bg.png" mode=""></image>
			<view class="k">
				<view class="" style="display: flex;">
					<u-avatar v-if="userInfo" :src="$imageOss(userInfo.avatar)" size="60" />
					<u-avatar v-else size="60" />
					<view class="name" v-if="userInfo.mobile">
						<view class="">{{userInfo.nickname}}</view>
						<view class="" style="font-size: 28rpx;">{{userInfo.mobile}}</view>
					</view>

					<view class="name" v-if="!userInfo.mobile" style="line-height: 90rpx;font-size: 36rpx;"
						@tap.stop="Jump('/pages/bind/login')">登录</view>
				</view>
				<u-icon name="setting" size="20" color="#fff" @click="Jump('/pages/my/system')"></u-icon>
			</view>
		</view>
		<!-- 用户信息 -->
		<view class="infoBox">
			<view class="info_b">
				<view class="member_l" @tap.stop="Jump('/pages/my/activity')">
					<view class="title">活动</view>
					<view class="text">{{userInfo.activity||0}}</view>
				</view>
				<view class="line"></view>
				<view class="member_l" @tap.stop="Jump('/pages/my/collect')">
					<view class="title">我的收藏</view>
					<view class="text">{{userInfo.collect||0}}</view>
				</view>
				<view class="line"></view>
				<view class="member_l" @tap.stop="Jump('/pages/my/coin')">
					<view class="title">我的预约</view>
					<view class="text">{{userInfo.venue||0}}</view>
				</view>
			</view>
		</view>

		<!-- 列表 -->
		<view class="listBox">
			<view class="list" v-for="(i,index) in three3List" :key="index" @tap.stop="Jump(i.path)"
				:style="{borderBottom:index !=3 ? '2rpx soild rgba(217, 217, 217, 0.4);':'none'}">
				<view class="" style="display: flex;">
					<view class="" style="padding: 4rpx;">
						<image :src="i.url" mode="widthFix"></image>
					</view>

					<view class="text">{{i.title}}</view>
				</view>
				<u-icon name="arrow-right" size="22" color="#B6B6B6"></u-icon>
			</view>
		</view>
		<view class="button" v-if="userInfo.mobile" @tap.stop="handleLogout()"> 退出登录 </view>
		<u-modal :show="delShow" title="退出登录" content="确认退出登录吗？" close-on-click-overlay show-cancel-button
			@close="closeDel" @cancel="closeDel" @confirm="handleDel" />

	</view>
</template>

<script>
	import {
		getuserinfo
	} from "@/request/myApi.js";
	export default {
		data() {
			return {
				userInfo: {},
				delShow: false, // 退出登录
				three3List: [{
						url: '/static/my/t1.png',
						title: '我的活动',
						path: '/pages/my/activity'
					},
					{
						url: '/static/my/t2.png',
						title: '我的培训',
						path: '/pages/my/train'
					},
					{
						url: '/static/my/t3.png',
						title: '我的预约',
						path: '/pages/my/coin'
					},
					{
						url: '/static/my/t4.png',
						title: '我的消息',
						path: '/pages/my/message'
					},
					{
						url: '/static/my/t3.png',
						title: '我的协议',
						path: '/pages/my/message?type=agreement'
					}
				]
			};
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 关闭退出登录弹窗
			closeDel() {
				this.delShow = false;
			},
			// 打开退出登录弹窗
			handleLogout() {
				this.delShow = true;
			},
			// 退出登录
			handleDel() {
				this.delShow = false;
				uni.removeStorageSync("userInfo");
				uni.removeStorageSync("token");
				uni.showToast({
					title: '退出成功！',
					icon: "none",
				});
				this.getUserInfo() 
			},
			// 获取用户信息
			getUserInfo() {
				let that = this
				getuserinfo().then(res => {
					if(res.code == 200){
						that.userInfo = res.data
					}else{
						that.userInfo = {}
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
					
				})
			},

			// 跳转
			Jump(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f9f9f9;
	}

	button {
		margin: 0;
		padding: 0;
		border: none;
		background: none;
	}

	.button {
		width: 85%;
		height: 80rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		margin: 0 auto;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		background-color: #466EC5;
		border-radius: 20rpx;
	}

	button::after {
		border: none;
	}

	.record {
		position: absolute;
		left: 9%;
		top: 42%;
		color: #fff;
		font-size: 22rpx;
		z-index: 1000;
	}

	.my {
		width: 100vw;

		.bjImage {
			width: 100%;

			image {
				width: 100%;

			}

			.k {
				width: 656rpx;
				height: 126rpx;
				display: flex;
				border: 1px soild black;
				position: absolute;
				top: 224rpx;
				left: 50rpx;
				overflow: hidden;
				justify-content: space-between;

				// border-radius: 50%;
				.image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.name {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					height: 120rpx;
					padding: 14rpx 30rpx;
					color: #fff;
					font-size: 30rpx;
					box-sizing: border-box;
				}
			}

		}

		.infoBox {
			width: 90%;
			height: 154rpx;
			border-radius: 20rpx;
			// background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, #FFFFFF 100%);
			background: #FFFFFF;
			backdrop-filter: blur(10px);
			margin: 0 auto;
			margin-top: -88rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.info_b {
				display: flex;
				text-align: center;
				height: 100%;
				font-size: 28rpx;

				.member_l {
					width: 33%;
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					color: #313131;
					justify-content: space-between;

					.title {
						font-size: 30rpx;
					}

					.text {
						color: #466EC5;

					}
				}
			}


		}


		.listBox {
			width: 84%;
			margin: 40rpx auto;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;

			.list {
				width: 100%;
				padding: 24rpx 20rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				border-bottom: 2rpx solid rgba(217, 217, 217, 0.4);

				image {
					width: 32rpx;
					margin-right: 30rpx;
				}

				.text {
					font-size: 30rpx;
					font-weight: 400;
					margin-top: 2rpx;
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}

	}
</style>
